<template>
	<view class="every-share-detail">
		<share-lists :data="data" :dateObj="dateObj" :weather="weather" :url="url" :avatar="userInfo.avatar"
			:username="userInfo.username" :code="userInfo.invitation_code" :address="address" @customValue="customValue"
			@codeSrc="codeSrc" @drawAll="drawAll">
		</share-lists>
		<view class="canvas-lists" style="width: 0;height: 0;overflow: hidden;">
			<lyz-canvas ref="canvas" @successSrc="successSrc" :board="canvasData"></lyz-canvas>
		</view>
		<uni-popup class="popup" ref="popup" type="center">
			<view class="popup-center">
				<image :src="imgSrc" mode="widthFix"></image>
			</view>
			<view class="btns" @click="save()">
				<button type="default">保存</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import shareLists from "../components/shareLists/shareLists.vue"
	import {
		getShareList
	} from "@/api/activity.js"
	import lyzCanvas from "../components/lyz-canvas/lyz-canvas"
	import {
		formatDateObj
	} from "@/utils/util.js"
	import {
		mapState
	} from "vuex"
	export default {
		name: "every-share-detail",
		components: {
			shareLists,
			lyzCanvas
		},
		data() {
			return {
				path: '',
				url: '', //邀请链接
				data: {},
				dateObj: {},
				weather: {},
				isShow: false,
				canvasData: {
					"width": "670rpx",
					"height": "1300rpx",
					"background": "#FFFFFF",
					"radius": "20rpx",
					"view": []
				},
				value: "", //自定义文案
				codeUrl: "", //二维码
				imgSrc: ""
			}
		},
		computed: {
			...mapState(['userInfo', 'isLogin', 'address']),
		},
		async onLoad(option) {
			if (!this.isLogin) {
				uni.navigateTo({
					url: "/pages/entrance/login/login"
				})
				return;
			}
			this.dateObj = formatDateObj(Date.now());
			uni.request({
				url: `https://www.mxnzp.com/api/weather/current/${this.address.address.city}?app_id=npmjlvsrnoblmmdw&app_secret=MUs3djJaaHlrRFh0UEV4cFROTS9oUT09`,
				success: (res) => {
					if (res.data.code === 1) {
						this.weather = res.data.data;
					}
				},
			})
			this.url = this.$baseURL + '/#/pages/entrance/register/register?code=' + this.userInfo.invitation_code;
			if (option.id) {
				let res = await getShareList({
					id: option.id
				});
				if (res.code === 1) {
					this.data = res.data[0];
					uni.getImageInfo({
						src: this.data.imgurl,
						success: (image) => {
							let ra = 670 / image.width;
							this.data.width = 670;
							this.data.height = parseInt(image.height * ra);
						}
					});
				}
			}
		},
		methods: {
			codeSrc(data) {
				this.codeUrl = data;
			},
			customValue(data) {
				this.value = data;
			},
			successSrc(data) {
				this.imgSrc = data;
				this.$refs.popup.open();
			},
			save() {
				// #ifdef APP-PLUS
				uni.saveImageToPhotosAlbum({
					filePath: this.imgSrc,
					success: ()=>{
						this.$msg("保存成功")
						this.$refs.popup.close();
					}
				});
				// #endif
				// #ifdef H5
				let url = this.imgSrc;
				let dload = document.createElement("a");
				dload.download = 'zkm'; // 设置下载的文件名，默认是'下载'
				dload.href = url;
				document.body.appendChild(dload);
				dload.click();
				dload.remove(); // 下载之后把创建的元素删除
				this.$refs.popup.close();
				// #endif
			},
			drawAll() {
				this.canvasData.views = [{
						"type": "image",
						"url": this.data.imgurl,
						"css": {
							"width": this.data.width + "rpx" || "670" + "rpx",
							"height": this.data.height + "rpx" || "500" + "rpx",
							"topLeftRadius": "20rpx",
							"left":"0rpx",
							"top":"0rpx",
							"topRightRadius": "20rpx",
							"mode": "scaleToFill",
						}
					},
					{
						"type": "text",
						"text": `${this.dateObj.day}`,
						"css": {
							"gradientTB": true,
							"top": this.data.height - 120 + "rpx",
							"left": "30rpx",
							"fontSize": "170rpx",
							"fontWeight": "bold",
							"fontFamily": "Microsoft YaHei"
						}
					},
					{
						"type": "text",
						"text": `${this.dateObj.date} 星期${this.dateObj.week} ${this.weather.weather} ${this.weather.temp}`,
						"css": {
							"color": "#000000",
							"background": "",
							"width": "640" + "rpx",
							"top": this.data.height + 20 + 'rpx',
							"right": "30rpx",
							"fontSize": "30rpx",
							"textStyle": "fill",
							"textAlign": "right",
						}
					},
					{
						"type": "text",
						"text": this.data.word,
						"css": {
							"top": this.data.height + 160 + "rpx",
							"left": "30rpx",
							"width": "640" + "rpx",
							"lineHeight": "46rpx",
							"maxLines": "4",
							"fontSize": "30rpx",
						}
					},
					{
						"type": "text",
						"text": '--' + this.data.wordfrom,
						"css": {
							"top": this.data.height + 350 + "rpx",
							"width": "640" + "rpx",
							"fontSize": "30rpx",
							"textAlign": "right",
						}
					},
					{
						"type": "text",
						"text": this.value,
						"css": {
							"top": this.data.height + 450 + "rpx",
							"width": "640" + "rpx",
							"fontSize": "32rpx",
							"left": "30rpx",
							"maxLines": "4",
							"color": "#2C405A",
							"lineHeight": "46rpx",
						}
					},
					{
						"type": "image",
						"url": this.userInfo.avatar,
						"css": {
							"top": this.data.height + 700 + "rpx",
							"left": "30rpx",
							"width": "90rpx",
							"height": "90rpx",
							"radius": "45rpx",
							"mode": "scaleToFill",
						}
					},
					{
						"type": "text",
						"text": this.userInfo.username,
						"css": {
							"top": this.data.height + 710 + "rpx",
							"fontSize": "32rpx",
							"left": "140rpx",
							"fontSize": "30rpx",
							"fontWeight": "bold",
						}
					},
					{
						"type": "text",
						"text": "邀请码:" + this.userInfo.invitation_code,
						"css": {
							"top": this.data.height + 756 + "rpx",
							"fontSize": "32rpx",
							"left": "140rpx",
							"fontSize": "24rpx",
							"color": "#808080"
						}
					},
					{
						"type": "image",
						"url": this.codeUrl,
						"css": {
							"top": this.data.height + 650 + "rpx",
							"width": "640" + "rpx",
							"left": "480rpx",
							"width": "160rpx",
							"height": "160rpx",
							"mode": "scaleToFill",
						}
					},
				];
				this.$refs.canvas.drawAll();
			}
		}
	}
</script>

<style scoped lang="less" src="./every-share-detail.less">
</style>
